<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片样式设置</title>
    <script type="text/javascript" src="../internal.js"></script>
    <!-- jquery -->
    <script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="slider.js"></script>

<style>
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#img-dialog-content {
	background: #f8f8f8;
}

.item {
	display: inline-block;
	width: 240px;
	box-sizing: border-box;
	height: auto;
	text-align: center;
	padding: 10px;
	vertical-align: top;
	border-style: solid;
	border-width: 2px;
	border-color: transparent;
	border-top-color: #aaa;
	cursor: pointer;
}

.item img {
	max-height: 150px;
	max-width: 100%;
	width: auto !important;
	-webkit-transition: transform .3s ease;
	-o-transition: transform .3s ease;
	transition: transform .3s ease;
}

.item p {
	margin-bottom: 10px;
}

.item:not(.active):hover img {
	transform: scale(1.1);
}

.item.active {
	background: #fff;
	border: 2px solid red;
}

button {
	margin-right: 10px;
	padding: 5px 15px;
}

.slider {
	height: 16px !important;
	width: auto;
	position: relative;
	background-color: #FFF;
	margin-bottom: 5px;
	border: 1px solid #aaa;
}

.slider .complete {
	height: 100%;
	width: auto;
	color: #333;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	background-color: #ccc;
	z-index: 2;
}

.slider .marker {
	height: 100%;
	width: 12px;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #999;
	z-index: 3;
}
.head_text{
	padding: 4px 10px;
}
</style>
</head>
<body>
	<div class="head_text">
		<p>提示：点击选择想要的图片边框阴影式样后，再点击底部的确认按钮应用效果。</p>
		<div style="margin-top: 10px; font-size: 16px;">
			<span style="vertical-align: top;">圆角：</span> <input type="hidden" id="img-radius" placeholder="如20px;">
			<div class="_imgradius slider" style="display:inline-block;height:16px;margin-bottom:5px;width: 200px;    vertical-align: middle;">
				<span id="radius-width" style="float:right;z-index: 5;color: #999;line-height: 16px;font-size: 10px;">0%</span>
			</div>
			<span style="font-size:14px;">（提示：拖地调整圆角大小）</span>
		</div>
	</div>
	

	<div id="img-dialog-content" style="padding:0;height:360px;overflow-y:auto;">
		
		
	</div>
<div style="text-align:center;margin-top:15px;">
 	<button type="button" onclick="applyParagraph('active');" class="btn btn-success" data-dismiss="modal">应用到当前图片</button>
 	<button type="button" onclick="applyParagraph('all');" class="btn btn-success" data-dismiss="modal">应用到全文所有图片</button>
 	<button type="button" onclick="dialog.close(false);" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
<script src="imgstyle.js"></script>    

</body>
</html>